<template>
  <div class="header" :style="{ backgroundColor: color }">
    <div class="header-logo">
      <img class="header-logo-img" src="~@/assets/images/logo.png">
    </div>
    <div class="header-navigation">
      <span
        class="header-navigation-item"
        v-for="nav in navigations"
        :key="nav.path"
        @click="handleJump(nav)">
        {{ nav.label }}
      </span>
      <span class="header-navigation-item login-button" :style="{ color}">登入</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'common-header',
  props: {
    color: String
  },
  data() {
    return {
      navigations: [
        { label: '首页', path: '/' },
        { label: '产品介绍', path: '/introduction' },
        { label: '申请代理', path: '/apply' },
        { label: '关于我们', path: '/about' },
      ]
    }
  },
  methods: {
    handleJump(nav) {
      this.$router.push(nav.path)
    }
  }
}
</script>

<style scoped lang="scss">
  $phone-width: 450px;
  .header {
    width: 100%;
    height: 42px;
    display: flex;
    align-items: center;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 2000;
    &-logo {
      width: 55%;
      height: 100%;
      display: flex;
      align-items: center;
      &-img {
        width: 56px;
        margin-left: 38%;
      }
    }
    &-navigation {
      flex-grow: 1;
      &-item {
        font-size: 14px;
        color: #fff;
        cursor: pointer;
        margin-right: 16px;
        &.login-button {
          display: inline-block;
          width: 90px;
          height: 24px;
          text-align: center;
          line-height: 24px;
          background:rgba(253,246,236,1);
          border:1px solid rgba(245, 218, 177, 1);
          border-radius:3px;
          color: #FF615C;
        }
      }
    }
  }
  @media screen and (max-width: $phone-width) {
    .header {
      &-logo {
        width: 20%;
        &-img {
          margin: 0 auto;
        }
      }
      &-navigation {
        &-item {
          font-size: 12px;
          margin-right: 8px;
          &.login-button {
            width: 60px;
          }
        }
      }
    }
  }
</style>
